<template>
    <div class="iot_single">
            <a href="#" @click.prevent="GetDetails(id),showPopup()" >
            <img :src="src" alt="">
            <p>{{ Name }}</p>
            <p>{{ '￥'+price }}</p>
            </a>
    </div>
    <van-popup
    v-model:show="show"
    position="bottom"
    closeable
    :style="{ height: '100%' }"
  >
      <GoodsDetails :GoodsDetail="GoodsDetail"></GoodsDetails>
  </van-popup>
</template>

<script>
import { ref,inject, reactive } from 'vue';
import GoodsDetails from './GoodsDetails.vue';
import { sendAxios } from '../../public/packaged_axios';

export default {
    name:'GoodsCell',
    components:{
      GoodsDetails
    },
    props:['src','id','Name','price'],
    setup(props){
      const show = ref(false);
      const showPopup = () => {
        if(indexFlog.value < 16){
          show.value = true;
        }
      };
      const indexFlog = inject('indexFlog');
      let GoodsDetail = reactive([])
      function GetDetails(id){
          if(indexFlog.value < 16){
            sendAxios('https://pcapi-xiaotuxian-front-devtest.itheima.net/goods?id='+id).then(data=>{
              GoodsDetail[0]=data.result
            })
          }
        }
        return {props,show,showPopup,GetDetails,GoodsDetail}
    }
}
</script>

<style scoped>
p {
    margin: 0;
    word-wrap:break-word; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-wrap:break-word; 
    overflow: hidden;
}
a{
    text-decoration: none;
    color: black;
}
.iot_single a {
  display: inline-block;
  width: 160px;
  height: 240px;
  border-radius: 5px;
  background-color: #fff;
  margin: 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.iot_single a:hover{
    border: 1px solid #27ba9b;
}
.iot_single img {
  width: 140px;
}
.iot_single a p:nth-child(2) {
  width: 100%;
  height: 35px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 17px;
  text-align: left;
}
.iot_single a p:nth-child(3) {
  align-self: flex-end;
  color: #cf4444;
  font-size: 12px;
}
.van-popup::-webkit-scrollbar{
    width: 5px;
}
.van-popup::-webkit-scrollbar-thumb{
    background:#b0b0b0;
    border-radius: 1px; 
}
</style>